<template>
  <div>
    <el-card shadow="hover">
      <el-table :data="skus">
        <el-table-column label="序号" type="index" width="80"></el-table-column>
        <el-table-column
          label="名称"
          width="100"
          prop="skuName"
        ></el-table-column>
        <el-table-column
          label="描述"
          width="150"
          prop="skuDesc"
        ></el-table-column>
        <el-table-column label="默认图片" width="120">
          <template #="{ row }">
            <img width="100" :src="row.skuDefaultImg" />
          </template>
        </el-table-column>
        <el-table-column
          label="重量(KG)"
          width="100"
          prop="weight"
        ></el-table-column>
        <el-table-column
          label="价格(元)"
          width="100"
          prop="price"
        ></el-table-column>
        <el-table-column label="操作">
          <template #="{ row }">
            <el-button
              type="info"
              icon="ele-Bottom"
              v-if="row.isSale"
              size="small"
              @click="cancelSale(row.id)"
              title="下架"
            ></el-button>
            <el-button
              type="success"
              icon="ele-Top"
              v-else
              size="small"
              @click="OnSale(row.id)"
              title="下架"
            ></el-button>
            <el-button
              type="primary"
              icon="ele-Edit"
              size="small"
              title="编辑"
            ></el-button>
            <el-button
              type="info"
              icon="ele-InfoFilled"
              size="small"
              title="查看详情"
              @click="showSkuDetailHandler(row)"
            ></el-button>
            <el-button
              type="danger"
              icon="ele-Delete"
              size="small"
              title="删除"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin: 20px 0"
        :total="total"
        :current-page="page"
        :page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        @current-change="paginationCurrentChangeListener"
        @size-change="paginationSizeChangeListener"
        layout="prev,pager,next,jumper,->,sizes,total"
      ></el-pagination>
    </el-card>
    <el-drawer
      v-if="skuDetail"
      size="50%"
      v-model="isShowDrawer"
      :title="skuDetail.skuName"
      @close="skuDetail = null"
    >
      <!-- 
        使用 栅格化（网格）布局
        参考：https://element-plus.gitee.io/zh-CN/component/layout.html#col-attributes
        push和offset：offset会影响后续的布局，而push不会
      -->
      <!-- <el-row>
        <el-col :span="1">3</el-col>
        <el-col
          :span="1"
          :push="8"
          :sm="{ span: 2, offset: 1 }"
          :md="{ span: 4, offset: 2 }"
          >1</el-col
        >
        <el-col :span="1" :offset="4">5</el-col>
      </el-row> -->

      <el-row>
        <el-col class="col_title" :span="4">描述</el-col>
        <el-col class="col_content" :span="18" :offset="1">{{
          skuDetail.skuDesc
        }}</el-col>
      </el-row>

      <el-row>
        <el-col class="col_title" :span="4">价格</el-col>
        <el-col class="col_content" :span="18" :offset="1">{{
          skuDetail.price
        }}</el-col>
      </el-row>
      <el-row>
        <el-col class="col_title" :span="4">平台属性</el-col>
        <el-col class="col_content col_attr_list" :span="18" :offset="1">
          <el-tag v-for="item in skuDetail.skuAttrValueList" :key="item.id"
            >{{ item.attrName }} - {{ item.valueName }}</el-tag
          >
        </el-col>
      </el-row>

      <el-row>
        <el-col class="col_title" :span="4">销售属性</el-col>
        <el-col class="col_content col_attr_list" :span="18" :offset="1">
          <el-tag
            type="success"
            v-for="item in skuDetail.skuSaleAttrValueList"
            :key="item.id"
            >{{ item.saleAttrName }} - {{ item.saleAttrValueName }}</el-tag
          >
        </el-col>
      </el-row>
      <el-row>
        <el-col class="col_title" :span="4">图片</el-col>
        <el-col class="col_content col_attr_list" :span="18" :offset="1">
          <el-carousel class="img_carousel" style="width: 100%" height="150px">
            <el-carousel-item
              v-for="item in skuDetail.skuImageList"
              :key="item.id"
            >
              <img style="width: 100%; height: 100%" :src="item.imgUrl" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from "vue";
export default defineComponent({
  name: "ProductSkuList",
});
</script>
<script lang="ts" setup>
import {
  reqSkuPaginationList,
  reqOnSale,
  reqCancelSale,
  reqGetSkuById,
} from "@/api/sku";
import type { typeFindBySpuId, typeReqGetSkuByIdResponse } from "@/api/sku";
import usePagination from "@/hooks/pagination";
import { ElMessage } from "element-plus";
// 存储sku列表
const skus = ref<typeFindBySpuId[]>([]);
const {
  total,
  page,
  pageSize,

  paginationCurrentChangeListener,
  paginationSizeChangeListener,
} = usePagination(getSkuListByPage, getSkuListByPage);

// 存储sku的详情
const skuDetail = ref<typeReqGetSkuByIdResponse | null>(null);
// 抽屉状态
const isShowDrawer = computed(() => !!skuDetail.value);

//请求1:  初始化 请求sku的分页列表
async function getSkuListByPage() {
  try {
    const res = await reqSkuPaginationList(page.value, pageSize.value);
    skus.value = res.records;
    total.value = res.total;
  } catch (e) {}
}
getSkuListByPage();

//方法1:  上架点击事件
const OnSale = async (id: number) => {
  try {
    await reqOnSale(id);
    ElMessage.success("上架成功");
    getSkuListByPage();
  } catch (e) {
    ElMessage.error("上架成功");
  }
};

//方法2:  下架点击事件
const cancelSale = async (id: number) => {
  try {
    await reqCancelSale(id);
    ElMessage.success("下架成功");
    getSkuListByPage();
  } catch (e) {
    ElMessage.error("下架失败");
  }
};

//方法3:  获取查看指定sku的详情信息
async function showSkuDetailHandler(row: typeFindBySpuId) {
  try {
    skuDetail.value = await reqGetSkuById(row.id);
  } catch (e) {}
}
</script>

<style lang="less" scoped>
.el-carousel {
  padding: 20px;
  background-color: red;
}

/**https://cn.vuejs.org/api/sfc-css-features.html#scoped-css */
.img_carousel :deep(.el-carousel__button) {
  background-color: blue;
}

.el-row {
  margin: 10px 0;
}
.col_title {
  font-size: 16px;
  font-weight: bold;
  text-align: right;
}

.col_attr_list {
  display: flex;
  flex-wrap: wrap;
  /* flex -> gap：flex元素之间的间隙  */
  gap: 10px;
}
</style>
